菜菜菜的前端學習日誌 - Day15

Array Method

如果要對Array取所有的值或是進行值的改變...等等的行為，通常透過for迴圈來執行這些動作。

但是使用for迴圈執行必須先跑過一次迴圈得到index值，再透過index對特定或每一個陣列內的元素執行動作，程式難免會很多行，而使用forEach、map、filter、reduce...等Method就可以達到一樣的功能並且程式碼較為簡短。

接下來就來看看如何使用這些Method～

以下都拿第13天的陣列來說好了

var animal = ['cat', 'dog', 'horse', 'tiger', 'lion'];

forEach

有一個好想動物園裡面有許多動物，我們要如何知道有哪些動物呢？
來使用forEach來遍歷每個動物吧

forEach適用於遍歷整個Array，執行某項動作，而不修改內容
先以for迴圈方式寫一次

for(var i = 0; i < animal.length; i++){
    console.log(animal[i]);
}

接下來以forEach來印出所有的動物吧～

animal.forEach((i) => {
    console.log(i);
})

這樣子我們就能得到所有動物的名字囉～

map

有一天，好想動物園裡面的動物們在聊天，覺得他們的名字用小寫感覺很弱，所以他們希望能夠變成大寫可以霸氣一點，就讓我們來幫助他們完成

map能夠遍歷陣列內所有的值，並修改

一樣先用for迴圈寫一次吧

var bigAnimal = [];
for(var i = 0; i < animal.length; i++){
    bigAnimal[i] = animal[i].toUpperCase();
}
    console.log(bigAnimal);

接著用map

var bigAnimal = animal.map((i) => {
    return i.toUpperCase();
})
console.log(bigAnimal);

我們就把每個動物的名字變大寫了

reduce

又是有一天，動物園裡的動物們又在聊天，說上次在網路上看到有人的名字好長

所以決定要把他們的名字加起來看能不能比他長
牠們必須透過reduce來幫他完成

reduce能夠將陣列的內容加總，並回傳

照慣例的依樣先用for迴圈來寫一次

var longName = ''
for(var i = 0; i < bigAnimal.length; i++){
    longName += bigAnimal[i];
}
console.log(longName);

接下來呢就用reduce來做一次

var longName = bigAnimal.reduce((total, val) => {  
    return total + val;
}, '');
console.log(longName);

這樣就把他們的名字都加起來了呢

filter

動物們在把所有的名字加起來後，仍然沒有比那個黑人的名字還長呀～

所以森林之王萊恩決定要把名字小於3個字母的動物踢除團隊，等後面再跟動物園長建議在召名字長的動物進來

就透過filter來幫他們篩選字母大於3個的動物吧

filter會將符合條件的值回傳

不厭其煩的先用for迴圈做一次

var newAnimalTeam = [];
for(var i = 0; i < bigAnimal.length; i++){
    if(bigAnimal[i].length > 3){
        newAnimalTeam.push(bigAnimal[i]);
    }
}
console.log(newAnimalTeam);

再用filter做一次

var newAnimalTeam = bigAnimal.filter((i) => {
    return i.length > 3;
})
console.log(newAnimalTeam);

動物們的故事就到此為止啦～
有沒有覺得用Array Method來跑Loop有讓程式碼比較簡潔呢？！